<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb20">
      <el-col :span="2">
        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="code" label="编码" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="职位名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="code" label="操作" min-width="120" align="left">
        <template slot-scope="{row}">
          <el-button @click="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <Edit :show.sync="showEdit" @confirm="getList"></Edit>
  </div>
</template>
<script>
import Edit from './components/edit.vue'
import { jobList, jobDel } from "@/api/user";
export default {
    components: {Edit},
  data() {
    return {
      tableData: [],
      currentItem: {},
      showEdit: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await jobList();
        this.tableData = res.data || [];
      } catch (error) {}
    },
    add() {
      this.showEdit = true;
    },
    del(row) {
      this.$modal
        .confirm("确定删除此条数据吗？")
        .then((res) => {
          return jobDel({ id: row.id });
        })
        .then((res) => {
          this.getList();
        })
        .catch((e) => {
          console.log("取消删除-----");
        });
    },
  },
};
</script>